<template>
  <div class="recursion">
    <div class="list" v-for="(v, i) in tree" :key="i">
      <h4 class="bg-blue">{{ v.title }}</h4>
      <recursion v-if="v.children" :tree="v.children"></recursion>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

export type TreeType = {
  title: string;
  children?: TreeType[];
};

@Component({
  name: "Recursion",
})
export default class Recursion extends Vue {
  @Prop() tree!: TreeType[];
}
</script>

<style scoped>
/* 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。 */
/* 因为所有的递归组件和递归子组件都打了同一个类似 data-v-44bbaa82 这样的 tag */
.list .bg-blue {
  background: #0ff;
}
</style>
